<template>
  <div>
    <items-head title="登录页" />
    <div class="wrap">
      <img class="hualogo"
           src="../../assets/img/hualogo.png"
           alt="">
      <van-form @submit="onSubmit">
        <van-field v-model="loginDate.username"
                   name="username"
                   label="用户名"
                   placeholder="用户名"
                   :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="loginDate.pwd"
                   type="password"
                   name="pwd"
                   label="密码"
                   placeholder="密码"
                   :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin: 16px;">
          <van-button round
                      block
                      type="info"
                      native-type="submit">登录</van-button>
          <van-button class="register"
                      round
                      block
                      type="info"
                      @click="$router.push('/register')">账号密码注册</van-button>
        </div>
      </van-form>
      <div class="else">其他方式登录</div>
      <div class="loginIcon">
        <van-icon name="wechat"></van-icon>
        <span>微信</span>
        <van-icon name="alipay"></van-icon>
        <span>支付宝</span>
        <van-icon name="envelop-o"></van-icon>
        <span>邮箱</span>
      </div>
    </div>
  </div>
</template>

<script>
import ItemsHead from 'components/ItemsHead'
import { Login } from 'api'
export default {
  name: 'login',
  data () {
    return {
      loginDate: {
        username: '',
        pwd: ''
      }
    }
  },
  methods: {
    onSubmit (params) {
      Login({
        ...params,
        deviceId: 111,
        deviceName: '小懒'
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          localStorage.setItem('token', res.data.data.token)
          this.$toast.success({
            message: '登录成功',
            duration: 1000,
            onClose: () => {
              if (this.$route.query.from) {
                console.log(this.$route.query.from)
                this.$router.replace(this.$route.query.from)
              } else {
                this.$router.replace('/home')
              }
            }
          })
        } else {
          this.$toast.fail('登录失败')
        }
      })
    }
  },
  components: {
    ItemsHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  background-color: #ffffff;
  height: 100vh;
  .hualogo {
    width: 183px;
    height: 24px;
    display: block;
    margin: 34px auto 20px;
  }
  .van-button {
    background-color: #ff734c;
    border: transparent;
    font-size: 16px;
  }
  .register {
    background-color: #fff;
    color: #71797f;
    margin-top: 30px;
  }
  .else {
    width: 100%;
    text-align: center;
    margin-top: 80px;
    position: relative;
    color: rgba(0, 0, 0, 0.2);
    &::before {
      content: "";
      display: block;
      width: 100px;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: 10px;
      left: 20px;
    }
    &::after {
      content: "";
      display: block;
      width: 100px;
      height: 1px;
      background-color: rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: 10px;
      right: 20px;
    }
  }
  .loginIcon {
    display: flex;
    width: 100%;
    justify-content: space-around;
    height: 24px;
    align-items: center;
    margin-top: 20px;
    .van-icon {
      color: #1cacea;
      font-size: 26px;
    }
    span {
      margin-left: -50px;
      font-size: 14px;
    }
  }
}
</style>
